#CSS Common Properties
Note: There are over 500 CSS properties. This list includes the most common and essential ones. New properties are constantly being added as the CSS specification evolves.
#Text Properties
| Property | Description |
|---|---|
color | Sets the text color |
font-family | Sets the font family |
font-size | Sets the font size |
font-weight | Sets the font weight |
font-style | Sets the font style (e.g., italic) |
text-align | Sets the text alignment |
text-decoration | Sets text decoration (e.g., underline) |
line-height | Sets the line height |
letter-spacing | Sets the spacing between characters |
word-spacing | Sets the spacing between words |
text-transform | Controls the case of the text |
text-indent | Sets the indentation of the first line |
text-shadow | Adds shadow to the text |
#Background Properties
| Property | Description |
|---|---|
background-color | Sets the background color |
background-image | Sets the background image |
background-repeat | Defines how the background image is repeated |
background-position | Sets the position of the background image |
background-attachment | Determines if the background is fixed |
background-size | Sets the size of the background image |
background-clip | Defines the painting area of the background |
background-origin | Defines the positioning area of the background |
#Box Model Properties
| Property | Description |
|---|---|
width | Sets the width of an element |
height | Sets the height of an element |
margin | Sets the outer margin |
padding | Sets the inner padding |
border | Sets the border |
border-radius | Sets the border radius (rounded corners) |
box-shadow | Adds shadow to the box |
box-sizing | Defines how the total size is calculated |
overflow | Sets how content overflows the element |
#Positioning Properties
| Property | Description |
|---|---|
position | Sets the positioning method |
top | Sets the top offset of a positioned element |
right | Sets the right offset |
bottom | Sets the bottom offset |
left | Sets the left offset |
z-index | Sets the stacking order |
float | Floats an element |
clear | Clears floated elements |
#Flexbox Layout Properties
| Property | Description |
|---|---|
display | Sets the display mode |
flex-direction | Sets the direction of the main axis |
flex-wrap | Sets whether items should wrap |
flex-flow | Shorthand for flex-direction and flex-wrap |
justify-content | Aligns items along the main axis |
align-items | Aligns items along the cross axis |
align-content | Aligns multiple lines along the cross axis |
order | Sets the order of items |
flex-grow | Sets the grow factor |
flex-shrink | Sets the shrink factor |
flex-basis | Sets the initial main size |
flex | Shorthand for flex-grow, flex-shrink, and flex-basis |
align-self | Aligns a single item independently |
#Grid Layout Properties
| Property | Description |
|---|---|
grid-template-columns | Defines the column track sizes |
grid-template-rows | Defines the row track sizes |
grid-template-areas | Defines named grid areas |
grid-template | Shorthand for the above three |
grid-column-gap | Sets the gap between columns |
grid-row-gap | Sets the gap between rows |
grid-gap | Shorthand for row and column gaps |
justify-items | Aligns content horizontally in cells |
align-items | Aligns content vertically in cells |
place-items | Shorthand for align-items and justify-items |
justify-content | Aligns the entire grid horizontally |
align-content | Aligns the entire grid vertically |
place-content | Shorthand for align-content and justify-content |
grid-auto-columns | Sets size for implicitly created columns |
grid-auto-rows | Sets size for implicitly created rows |
grid-auto-flow | Controls auto-placement algorithm |
grid | Shorthand for multiple grid properties |
#Transitions and Animations
| Property | Description |
|---|---|
transition | Sets transition effects |
transition-property | Specifies which property to animate |
transition-duration | Sets the duration of the transition |
transition-timing-function | Sets the timing curve |
transition-delay | Sets the delay before transition starts |
animation | Sets animation |
animation-name | Sets the animation name |
animation-duration | Sets animation duration |
animation-timing-function | Sets animation timing curve |
animation-delay | Sets animation delay |
animation-iteration-count | Sets how many times animation runs |
animation-direction | Sets the direction of animation |
animation-fill-mode | Sets how styles apply before/after animation |
animation-play-state | Sets whether the animation is running or paused |
#Transform Properties
| Property | Description |
|---|---|
transform | Applies 2D or 3D transformations |
transform-origin | Sets the origin of the transform |
transform-style | Preserves 3D position of child elements |
perspective | Sets the perspective view for 3D elements |
perspective-origin | Sets the base point of the perspective |
backface-visibility | Defines whether the back face is visible |
#Miscellaneous Properties
| Property | Description |
|---|---|
opacity | Sets the transparency level |
visibility | Sets the visibility of the element |
cursor | Sets the mouse cursor style |
clip | Clips an absolutely positioned element |
clip-path | Defines a clipping path for the element |
filter | Applies visual effects |
mix-blend-mode | Sets how content blends with background |
object-fit | Defines how content fits into a container |
object-position | Sets content position inside container |
resize | Allows the element to be resizable |
user-select | Controls text selection by user |
pointer-events | Defines how the element reacts to pointer events |